<template>
  <div>
    <!-- 查询条件 -->
    <el-form style="height: 50px" :model="page" :inline="true">
      <el-form-item>
        <el-select v-model="page.roleId" placeholder="请输入要查询的角色">
          <el-option v-for="item in RoleList" :key="item.roleId" :label="item.roleName" :value="item.roleId"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-input v-model="page.userName" placeholder="请输入要查询的用户名称"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="GetRoleInfo()" class="el-icon-search">查询</el-button>
        <el-button type="success" @click="OpenAddRoleDiaLog()" class="el-icon-plus">新增角色</el-button>
      </el-form-item>
    </el-form>

    <!-- 角色列表 -->
    <el-table border ref="multipleTable" :data="RoleData" tooltip-effect="dark" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column prop="roleId" label="角色编号"></el-table-column>
      <el-table-column prop="userName" label="用户名"></el-table-column>
      <el-table-column prop="fullName" label="姓名"></el-table-column>
      <el-table-column prop="avatar"   label="头像">
        <template slot-scope="scope">
          <el-avatar :size="80" v-if="scope.row.avatar" :src="'http://localhost:5000' + scope.row.avatar"></el-avatar>
        </template>
      </el-table-column>
      <el-table-column prop="roleName" label="角色"></el-table-column>        
      <el-table-column prop="email" label="邮箱"></el-table-column>
      <el-table-column prop="createTime" label="登录时间" width="200px;"></el-table-column>
      <el-table-column prop="remark" label="角色说明" width="200px;">
         <template slot-scope="scope">
                <span v-html="scope.row.remark"></span>
            </template>
      </el-table-column>
       <el-table-column prop="updateTime" label="修改时间" width="200px;"></el-table-column>
      <el-table-column label="操作" width="250px;">
        <template slot-scope="scope">
          <el-button type="danger" class="el-icon-delete" circle @click="DeleteRole(scope.row.urId)">删除</el-button>
          <el-button type="primary" class="el-icon-edit" circle @click="OpenUpdateRole(scope.row.roleId)">编辑</el-button>
          <el-button type="text" @click="OpenPermission(scope.row.roleId)">权限分配</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 使用dialog对话框 =>新增角色 -->
    <el-dialog title="新增角色" :visible.sync="dialogFormVisible">
      <AddRoleView ref="AddRoleView"></AddRoleView>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="addRole()">确 定</el-button>
        <el-button @click="dialogFormVisible = false">取 消</el-button>
      </div>
    </el-dialog>


    <!-- 使用dialog对话框 => 修改角色 -->
    <el-dialog title="修改角色" :visible.sync="dialogFormVisible2">
      <UpdRoleView ref="UpdRoleView" 
      :roleId="roleId" 
      :key="new Date().getTime()"
      >
      </UpdRoleView>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="updRole()">修 改</el-button>
        <el-button @click="dialogFormVisible2 = false">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 使用dialog对话框 => 权限分配 -->
    <el-dialog title="权限分配" :visible.sync="dialogFormVisible3">
      <AssingPerssionView ref="AssingPerssionView" 
      :roleId="roleId" 
      :key="new Date().getTime()"
       @onAssiogClose="onAssiogClose()" 
      >
      </AssingPerssionView>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="UpdPerssion()">修 改</el-button>
        <el-button @click="dialogFormVisible2 = false">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 完整分页 -->
    <div style="display: flex; justify-content: center">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page.pageIndex"
        :page-sizes="[1, 2, 3, 10]"
        :page-size="page.pageSize"
        layout="slot, sizes"
        :total="totalCount"
        prev-text="上一页"
        next-text="下一页"
      >
        <span>
          共 <b style="color: red">{{ totalCount }}</b> 条, 每页
          <b style="color: red">{{ page.pageSize }}</b
          >, 当前
          <b style="color: red">{{ page.pageIndex }} / {{ pageCount }}</b> 页
        </span>
      </el-pagination>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page.pageIndex"
        :page-sizes="[1, 2, 3, 10]"
        :page-size="page.pageSize"
        layout="slot, prev, pager, next"
        :total="totalCount"
        prev-text="上一页"
        next-text="下一页"
      >
        <button type="primary" @click="handleCurrentChange(1)">首页</button>
      </el-pagination>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page.pageIndex"
        :page-sizes="[1, 2, 3, 10]"
        :page-size="page.pageSize"
        layout="slot, jumper"
        :total="totalCount"
        prev-text="上一页"
        next-text="下一页"
      >
        <button type="primary" @click="handleCurrentChange(pageCount)">
          尾页
        </button>
      </el-pagination>
    </div>
  </div>
</template>
<script>
import { BindRole } from "../../api/role.js";
import { RoleInfo } from "../../api/role.js";
import { RoleDel } from "../../api/role.js";

import AddRoleView from "../Role/AddRole.vue";
import UpdRoleView from "../Role/UpdateRole.vue";
import AssingPerssionView from "../Permission/AssingPermission.vue";
export default {
  //父组件传值 => 用户修改
  components: {
    AddRoleView,
    UpdRoleView,   
    AssingPerssionView
  },
  data() {
    return {
      //查询参数
      page: {
        roleId: null,  
        userName: "",  
        pageIndex: 1,
        pageSize: 2,
      },
      totalCount: 0,
      pageCount: 0,
      RoleList: [], //绑定角色
      RoleData: [], //角色列表
      multipleTable: [], //复选框集合
      dialogFormVisible: false,
      dialogFormVisible2: false,
      dialogFormVisible3: false,
      //用于子父组件传值编辑功能中传递用户Id给子组件
      roleId: 0,
    };
  },
  methods: {
    //复选框
    handleSelectionChange(val) {
      this.multipleTable = val;
    },
    //页大小
    handleSizeChange(val) {
      this.page.pageSize = val;
      this.GetRoleInfo();
    },
    //页码
    handleCurrentChange(val) {
      this.page.pageIndex = val;
      this.GetRoleInfo();
    },
    //【绑定角色】
    BindRoleList() {
      BindRole().then((res) => {
        this.RoleList = res.data.data;
      });
    },
    //【角色列表】
    GetRoleInfo() {
      var moment = require('moment'); // require
      RoleInfo(this.page).then((res) => {
        this.RoleData = res.data.list;
        //处理日期格式
        this.RoleData.forEach(ele=>{
            ele.createTime = moment(ele.createTime).format("YYYY年MM月DD日 HH:mm:ss");
            ele.updateTime = moment(ele.updateTime).format("YYYY年MM月DD日 HH:mm:ss");
        });
        this.totalCount = res.data.totalCount;
        this.pageCount = res.data.pageCount;   
      });
    },
    //【删除角色】
    DeleteRole(urId) {
      this.$confirm("确定要删除用户角色信息吗?", {confirmButtonText: "确定",cancelButtonText: "取消",type: "warning",
      }).then(() => {
          RoleDel(urId).then((res) => {
            if (res.data.result == 200) {
              this.$message({ type: "success", message: res.data.message });
              this.GetRoleInfo();
            } else {
              this.$message({ type: "error", message: res.data.message });
              this.GetRoleInfo();
            }
          });
      }).catch(() => {
          this.$message({ type: "info", duration: 800, message: "已取消删除!" });
      });
    },
    //打开添加角色Dalog弹框
    OpenAddRoleDiaLog() {
      this.dialogFormVisible = true;
    },
    //添加角色
    addRole() {
      this.$refs.AddRoleView.AddRoleInfo("form");
    },
    //打开修改角色Dalog弹框
    OpenUpdateRole(id){
        this.dialogFormVisible2 = true;
        this.roleId= id;
    },
    //用户修改
    updRole(){
        this.$refs.UpdRoleView.UpdateRoleInfo('form');
    },
    //打开权限分配Dialog对话框
    OpenPermission(id){
      this.dialogFormVisible3 = true;
      this.roleId= id;
    },
    //修改权限
    UpdPerssion(){
      this.$refs.AssingPerssionView.getCheckedKeys();
      this.$refs.AssingPerssionView.UpdateAssingPermissionInfo();
    },
    //权限分配回调
    onAssiogClose() {
      this.dialogFormVisible3 = false;
    },
  },
  created() {
    this.GetRoleInfo();  //调用全部角色方法
    this.BindRoleList();  //调用绑定角色下拉框方法
  },
};
</script>
<style>
</style>

